<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .style1 {
      color: red;
    }

    .style2 {
      color: black;
    }
  </style>
</head>
<body>
<div id="app">
  <img v-bind:src="imgUrl" style="width: 100px; height: 100px" alt="">
  <a v-bind:href="url" target='_blank'>百度一下</a>
  <p :class="cc">{{message}}</p>
  <p class="tittle" :class="{style1: isActive, line: isLine}">{{message}}</p>
  <button @click="butClick">按钮1</button>
  <p :class="getClass()">{{message}}</p>
  <p :class="[cc, line]">{{message}}</p>
  <p>-------------------------------</p>
  <p v-for="(m, index) in movies" class="style1" :class="activeindex == index ? 'style2':''" @click="butClick2(index)">{{index + 1}} {{m}}</p>
  <p>-------------------------------</p>
  <p v-for="(m, index) in movies" :class="{style1: activeindex === index}" @click="butClick3(index)">{{index + 1}} {{m}}</p>
  <p>-------------------------------</p>
  <p :style="{fontSize: '20px'}">{{message}}</p>
  <p :style="{fontSize: finalSize + 'px', color: finalColor}">{{message}}</p>
  <p :style="getClass2()">{{message}}</p>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      message: "消息",
      imgUrl: "https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1035415831,1465727770&fm=26&gp=0.jpg",
      url: "https://www.baidu.com/",
      cc: "style1",
      line: "style2",
      isActive: true,
      isLine: true,
      movies: ["一", "二", "三"],
      activeindex: 0,
      finalSize: 30,
      finalColor: "red",
    },
    methods: {
      butClick: function () {
        this.isActive = !this.isActive;
      },
      getClass: function () {
        return {style1: this.isActive, line: this.isLine}

      },
      butClick2: function (index) {
        this.activeindex = index;
      },
      butClick3: function (index) {
        this.activeindex = index;
      },
      getClass2: function () {
        return {fontSize: this.finalSize + 'px', color: this.finalColor};
      }
    }
  })
</script>
</html>